import React from "react";
import { Button, Form, Input, Modal, Select, Table } from "antd";
const { Option } = Select;
import { getDialogs } from "@/services/dialog";
import { fakeAnswerRelevanceData } from "@/services/datastatistics";

class SkipModal extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			loading: false,
			list: [],
			total: 0,
			current: 1,
			size: 10,
		};
	}

	componentDidMount() {
		if (this.props.onRef) {
			this.props.onRef(this);
		}
	}

	showModal = () => {
		this.setState(
			{
				visible: true,
			},
			() => {
				this.queryByForm();
			}
		);
	};

	/* 关闭弹框 */
	cancelModal = (e, record) => {
		this.setState(
			{
				visible: false,
				loading: false,
				list: [],
				total: 0,
				current: 1,
				size: 10,
				type: 1,
				search: "",
			},
			() => {
				this.props.form.resetFields();
				if (record) {
					this.props.add(record);
				}
			}
		);
	};

	/* 条件查询 */
	queryByForm = () => {
		const info = this.props.form.getFieldsValue();
		this.setState(
			{
				type: info.type,
				search: info.search ? info.search : "",
				current: 1,
			},
			() => {
				this.getTableData();
			}
		);
	};

	/* 获取数据 */
	getTableData = () => {
		this.setState({ loading: true }, async () => {
			const { current, size, type, search } = this.state;
			const { robotId, rootCategoryId } = this.props;
			let res = null;
			res = await fakeAnswerRelevanceData({
				current,
				size,
				type,
				search,
				categoryParentPath: "",
				searchType: "1",
				orderType: "1",
			});

			this.setState({
				list: res.records ? res.records : [],
				total: res.total,
				loading: false,
			});
		});
	};

	handelSelectOnChange = (value) => {
		this.setState(
			{
				type: value,
				current: 1,
				size: 10,
			},
			() => {
				this.getTableData();
			}
		);
	};

	handelTablePageChange = (current, size) => {
		this.setState(
			{
				current: current,
			},
			() => {
				this.getTableData();
			}
		);
	};

	render() {
		const { visible, list, total, current, size, loading, type } = this.state;
		const { getFieldDecorator } = this.props.form;
		const columns = [
			{
				title: "标准问",
				dataIndex: "basicQuestion",
				key: "basicQuestion",
				width: 200,
				align: "center",
			},
			{
				title: "分类",
				dataIndex: "categoryNamePath",
				key: "categoryNamePath",
				width: 200,
				align: "center",
			},
			{
				title: "操作",
				dataIndex: "action",
				key: "action",
				width: 100,
				align: "center",
				render: (text, record) => {
					return (
						<div>
							<Button
								type={"primary"}
								size={"small"}
								onClick={(e) => this.cancelModal(e, record, type)}>
								选择
							</Button>
						</div>
					);
				},
			},
		];
		const columns1 = [
			{
				title: "标准问",
				dataIndex: "basicQuestion",
				key: "basicQuestion",
				width: 200,
				align: "center",
			},
			{
				title: "分类",
				dataIndex: "categoryNamePath",
				key: "categoryNamePath",
				width: 200,
				align: "center",
			},
			{
				title: "操作",
				dataIndex: "action",
				key: "action",
				width: 100,
				align: "center",
				render: (text, record) => {
					return (
						<div>
							<Button
								type={"primary"}
								size={"small"}
								onClick={(e) => this.cancelModal(e, record, type)}>
								选择
							</Button>
						</div>
					);
				},
			},
		];
		return (
			<Modal
				title={"选择跳转对象"}
				visible={visible}
				width={600}
				onCancel={this.cancelModal}
				footer={null}>
				<Form layout={"inline"} style={{ marginBottom: 20 }}>
					<Form.Item>
						{getFieldDecorator("type", { initialValue: 3 })(
							<Select
								style={{ width: 120 }}
								onChange={this.handelSelectOnChange}>
								<Select.Option value={1}>问答知识点</Select.Option>
								<Select.Option value={3}>多轮对话</Select.Option>
							</Select>
						)}
					</Form.Item>
					<Form.Item>
						{getFieldDecorator("search")(
							<Input.Search
								style={{ width: 300 }}
								placeholder={"请输入知识点标准问/相似问"}
								onSearch={this.queryByForm}
							/>
						)}
					</Form.Item>
					<Form.Item>
						<Button onClick={this.queryByForm}>查询</Button>
					</Form.Item>
				</Form>
				<Table
					columns={type == 1 ? columns : columns1}
					dataSource={list}
					loading={loading}
					bordered
					rowKey={"id"}
					pagination={{
						pageSize: size,
						onChange: (current, size) =>
							this.handelTablePageChange(current, size),
						current: current,
						total,
					}}
					scroll={{ y: 400 }}
				/>
			</Modal>
		);
	}
}

export default Form.create()(SkipModal);
